<template>
  <el-container class="layout-container">
    <!-- 左侧大模块导航栏 -->
    <el-aside width="200px" class="left-aside">
      <LeftNav @select="handleNavSelect" @openFormDesigner="handleOpenFormDesigner" />
    </el-aside>
    
    <!-- 中间和右侧区域 -->
    <el-container v-if="!showFormDesigner">
      <!-- 中间菜单栏 -->
      <el-aside width="250px" class="middle-aside">
        <!-- 仪表盘菜单 -->
        <DashboardMenu
          v-if="currentNav === 'dashboard'"
          @select="handleDashboardSelect"
        />
        
        <!-- 报表管理菜单 -->
        <MiddleMenu
          v-else-if="currentNav === 'reports'"
          @menuSelect="handleMenuSelect"
        />
        
        <!-- 系统设置菜单 -->
        <SettingsMenu
          v-else-if="currentNav === 'settings'"
          @select="handleSettingsSelect"
        />
      </el-aside>
      
      <!-- 右侧内容展示区域 -->
      <el-main class="main-content">
        <!-- 仪表盘内容 -->
        <div v-if="currentNav === 'dashboard'">
          <component :is="currentDashboard" />
        </div>
        
        <!-- 报表内容 -->
        <ReportDisplay 
          v-else-if="currentNav === 'reports'"
          :selectedMenu="selectedMenu"
        />
        
        <!-- 系统设置内容 -->
        <div v-else-if="currentNav === 'settings'">
          <component :is="currentSettings" />
        </div>
      </el-main>
    </el-container>

    <!-- 表单设计器 -->
    <el-container v-else>
      <el-main class="main-content">
        <FormDesigner 
          :formData="currentForm" 
          @back="handleFormDesignerBack"
          @save="handleFormSave"
        />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, markRaw, defineAsyncComponent, shallowRef } from 'vue'
import LeftNav from '../components/LeftNav.vue'
import MiddleMenu from '../components/MiddleMenu.vue'
import ReportDisplay from '../components/ReportDisplay.vue'
import FormDesigner from '../components/FormDesigner.vue'
import DashboardMenu from '../components/DashboardMenu.vue'
import SettingsMenu from '../components/SettingsMenu.vue'

// 导入仪表盘组件
const DashboardOverview = markRaw(defineAsyncComponent(() => import('../views/dashboard/Overview.vue')))
const DashboardPersonnel = markRaw(defineAsyncComponent(() => import('../views/dashboard/Personnel.vue')))
const DashboardAttendance = markRaw(defineAsyncComponent(() => import('../views/dashboard/Attendance.vue')))
const DashboardSalary = markRaw(defineAsyncComponent(() => import('../views/dashboard/Salary.vue')))

// 导入系统设置组件
const SettingsUsers = markRaw(defineAsyncComponent(() => import('../views/settings/Users.vue')))
const SettingsDirectories = markRaw(defineAsyncComponent(() => import('../views/settings/Directories.vue')))
const SettingsPermissions = markRaw(defineAsyncComponent(() => import('../views/settings/Permissions.vue')))

const currentNav = ref('dashboard')
const selectedMenu = ref('1')
const showFormDesigner = ref(false)
const currentForm = ref(null)
const currentDashboard = shallowRef(DashboardOverview)
const currentSettings = shallowRef(SettingsUsers)

// 处理主导航选择
const handleNavSelect = (index) => {
  currentNav.value = index
  if (index === 'dashboard') {
    showFormDesigner.value = false
    currentDashboard.value = DashboardOverview
  } else if (index.startsWith('settings:')) {
    const settingType = index.split(':')[1]
    handleSettingsSelect(settingType)
  }
}

// 处理仪表盘菜单选择
const handleDashboardSelect = (index) => {
  switch (index) {
    case 'overview':
      currentDashboard.value = DashboardOverview
      break
    case 'personnel':
      currentDashboard.value = DashboardPersonnel
      break
    case 'attendance':
      currentDashboard.value = DashboardAttendance
      break
    case 'salary':
      currentDashboard.value = DashboardSalary
      break
  }
}

// 处理报表菜单选择
const handleMenuSelect = (menuId) => {
  selectedMenu.value = menuId
}

// 处理系统设置菜单选择
const handleSettingsSelect = (index) => {
  switch (index) {
    case 'users':
      currentSettings.value = SettingsUsers
      break
    case 'directories':
      currentSettings.value = SettingsDirectories
      break
    case 'permissions':
      currentSettings.value = SettingsPermissions
      break
  }
}

// 处理打开表单设计器
const handleOpenFormDesigner = (form) => {
  currentForm.value = form
  showFormDesigner.value = true
}

// 处理表单设计器返回
const handleFormDesignerBack = () => {
  showFormDesigner.value = false
  currentForm.value = null
}

// 处理表单保存
const handleFormSave = (formData) => {
  // TODO: 保存表单数据
  console.log('保存表单数据:', formData)
  showFormDesigner.value = false
  currentForm.value = null
}
</script>

<style scoped>
.layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}

.left-aside {
  background-color: #304156;
  color: #fff;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

.middle-aside {
  background-color: #f5f7fa;
  border-right: 1px solid #e6e6e6;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

.main-content {
  background-color: #fff;
  padding: 0;
  height: 100%;
  flex: 1;
  overflow: hidden;
  margin: 0;
}

:deep(.el-container) {
  height: 100%;
  width: 100%;
}

:deep(.el-main) {
  padding: 0;
}
</style> 